<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main>
        <div class="tabtop">
          <div v-for="(item, index) in contractTypelist" :key="index" @click="choose(item.id)">
            <div :class="currenindex == index ? 'active' : 'text'">{{ item.value }}</div>
          </div>
        </div>
        <div class="header_right" @click="showCardNav = !showCardNav">
          <div class="title">搜索</div>
          <div>
            <span v-show="!showCardNav">
              <i style="margin-right: 5px;" class="el-icon-arrow-down"></i>
            </span>
            <span v-show="showCardNav">
              <i style="margin-right: 5px;" class="el-icon-arrow-up"></i>
            </span>
          </div>
        </div>
        <div v-show="showCardNav" class="hr"></div>
        <el-collapse-transition>
          <div v-show="showCardNav">
            <div class="search">
              <span style="display: inline-block;margin-bottom: 10px;">
                <span style="margin-left: 24px;margin-right: 12px;">站点名称</span>
                <el-input v-model="tableParam.station" style="width: 220px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <span style="margin-left: 24px;">
                <span style="margin-right: 12px;">供应商名称</span>
                <el-input v-model="tableParam.supplierName  " style="width: 220px;" clearable placeholder="请输入" @keyup.enter.native="gettableData()" />
              </span>
              <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(tableParam.page = 1), gettableData()">查 询</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="init()">重 置</el-button>
              <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="tableParamType = true">高级搜索</el-button>
            </div>
          </div>
        </el-collapse-transition>
        <div class="hr"></div>
        <div class="card">
          <div class="card_nav">
            <div></div>
            <div>
              <el-dropdown :hide-on-click="false" trigger="click" style="margin: 0 20px;">
                <el-link :underline="false">
                  <span class="el-icon--left">
                    <i class="iconfont iconicon_button_filtrate"></i>
                  </span>
                  筛选
                </el-link>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="(item, index) in table" :key="index">
                    <el-checkbox v-model="item.status">{{ item.label }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <el-link v-if="ButtonList.findIndex(res=>(res.buttonValue=='DAOCHU'))!==-1" :underline="false" @click="load()">
                <span class="el-icon--left">
                  <i class="iconfont iconicon_button_export1"></i>
                </span>
                导出
              </el-link>
            </div>
          </div>
          <div v-loading="tableLoading" class="card_info" :style="style">
            <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange">
              <template v-for="(item, index2) in table">
                <el-table-column v-if="item.status" :key="index2" :label="item.label" align="center" :width="item.width" :fixed="item.label == '操作'?'right':false">
                  <template slot-scope="scope">
                    <div v-if="item.label == '状态'">
                      <span v-if="currenindex==0" style="color:#808080">{{scope.row.rawStatus==0?'拒绝':scope.row.rawStatus==1?'待确定':scope.row.rawStatus==2?'已接受待提交计划':'已提交'}}</span>
                      <span v-if="currenindex==1" style="color:#808080">{{scope.row.carStatus==0?'拒绝':scope.row.carStatus==1?'待确定':scope.row.carStatus==2?'已接受待提交计划':'已提交'}}</span>
                    </div>
                    <div v-else-if="item.label == '交货计划时间段'">
                      <span>{{scope.row.startDeliveryTime}}--{{scope.row.endDeliveryTime}}</span>
                    </div>
                    <div v-else-if="item.label == '是否含运输'">
                      <span v-if="scope.row.transportStatus == 1" style="color:#00A754;">是</span>
                      <span v-else style="color:#969799;">否</span>
                    </div>
                    <div v-else-if="item.label == '操作'">
                      <el-dropdown v-if="currenindex==0" :hide-on-click="false" trigger="click">
                        <el-button size="mini" class="bottom_one">更多</el-button>
                        <el-dropdown-menu slot="dropdown" style="text-align: center">
                          <el-dropdown-item v-if="scope.row.rawStatus==1&&ButtonList.findIndex(res=>(res.buttonValue=='JIESHOU'))!==-1">
                            <el-button style="margin:5px 0" size="mini" class="bottom_one" @click="status(scope.row,'rawStatus',2)">接受</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item v-if="scope.row.rawStatus==1&&ButtonList.findIndex(res=>(res.buttonValue=='JUJUE'))!==-1">
                            <el-button style="margin:5px 0" size="mini" class="bottom_one" @click="status(scope.row,'rawStatus',0)">拒绝</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item v-if="scope.row.rawStatus==2&&ButtonList.findIndex(res=>(res.buttonValue=='JIAOHUOJH'))!==-1">
                            <el-button style="margin:5px 0" size="mini" class="bottom_one" @click="open(scope.row,'addDialog')">交货计划</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item v-if="scope.row.rawStatus==3&&ButtonList.findIndex(res=>(res.buttonValue=='SHIJIJH'))!==-1">
                            <el-button style="margin:5px 0" size="mini" class="bottom_one" @click="open(scope.row,'Dialog3')">实际交货</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item v-if="scope.row.rawStatus==3&&ButtonList.findIndex(res=>(res.buttonValue=='JIAOHUOCHAXUN'))!==-1">
                            <el-button style="margin:5px 0" size="mini" class="bottom_one" @click="open(scope.row,'goodsDialog')">交货查询</el-button>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                      <el-dropdown v-else :hide-on-click="false" trigger="click">
                        <el-button size="mini" class="bottom_one">更多</el-button>
                        <el-dropdown-menu slot="dropdown" style="text-align: center">
                          <el-dropdown-item v-if="scope.row.carStatus==1&&ButtonList.findIndex(res=>(res.buttonValue=='JIESHOU'))!==-1">
                            <el-button style="margin:5px 0" size="mini" class="bottom_one" @click="status(scope.row,'carStatus',2)">接受</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item v-if="scope.row.carStatus==1&&ButtonList.findIndex(res=>(res.buttonValue=='JUJUE'))!==-1">
                            <el-button style="margin:5px 0" size="mini" class="bottom_one" @click="status(scope.row,'carStatus',0)">拒绝</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item v-if="scope.row.carStatus==2">
                            <el-button style="margin:5px 0" size="mini" class="bottom_one" @click="open(scope.row,'Dialog2')">运输计划</el-button>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>
                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table>
          </div>
          <div class="card_bottom">
            <div class="card_bottom_left">
              <div class="top_page_totle">总共{{ total }}条</div>
              <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" layout="prev, pager, next, jumper" :total="total" @current-change="gettableData()"></el-pagination>
            </div>
            <div>
              <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <!--交货计划-->
    <el-dialog v-dialogDrag :visible.sync="addDialog" width="690px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">交货计划</span>
      <div class="dialoginfo">
        <el-form ref="reffrom1" :rules="rules1" :inline="true" :model="from1" label-width="110px">
          <el-form-item>
            <span slot="label">物料名称</span>
            <div style="width: 185px;">{{low.rawName}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">规格</span>
            <div style="width: 185px;">{{low.specification}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">采购量(吨)</span>
            <div style="width: 185px;">{{low.supplierNumber}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">供应量(吨)</span>
            <span>{{from1.actualNumber}}</span>
            <span style="padding-left:20px" class="table_link" @click="from2={},Dialog1=true">修改</span>
          </el-form-item>
          <el-form-item prop="cooperationId">
            <span slot="label" style="color:#FF0000;">协作单位</span>
            <el-select v-model="from1.cooperationId" placeholder="请选择" style="width: 185px;">
              <el-option v-for="(item, index) in arr1" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="low.transportStatus==1" prop="departure">
            <span slot="label" style="color:#FF0000;">车次</span>
            <el-input v-model="from1.departure" oninput="if(value>8000)value=8000" type="Number" placeholder="请输入" clearable style="width: 185px;"></el-input>
          </el-form-item>
          <el-form-item v-if="low.transportStatus==1" prop="TimeArr">
            <span slot="label" style="color:#FF0000;">交货时间段</span>
            <el-date-picker v-model="from1.TimeArr" style="width:400px;" type="datetimerange" unlink-panels value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" @change="from1.startDeliveryTime=TimeArr[0]||'',from1.endDeliveryTime=TimeArr[1]||''"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="addDialog=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="submit1()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改供应量 -->
    <el-dialog v-dialogDrag :visible.sync="Dialog1" width="460px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">修改供应量</span>
      <div>
        <el-form ref="reffrom2" :rules="rules4" :inline="true" :model="from2" label-width="110px">
          <el-form-item prop="actualNumber">
            <span slot="label" style="color:#FF0000;">供应量</span>
            <el-input v-model="from2.actualNumber" type="Number" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="modifyReason">
            <span slot="label" style="color:#FF0000;">修改原因</span>
            <el-input v-model="from2.modifyReason" type="textarea" :rows="5" resize="none" placeholder="请输入" style="width:240px" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="Dialog1=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="set1()">确 定</el-button>
      </span>
    </el-dialog>
    <!--运输计划-->
    <el-dialog v-dialogDrag :visible.sync="Dialog2" width="690px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">运输计划</span>
      <div class="dialoginfo">
        <el-form ref="reffrom2" :rules="rules5" :inline="true" :model="from2" label-width="80px">
          <el-form-item>
            <span slot="label">运输物料</span>
            <div style="width: 185px;">{{low.rawName}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">需求量(吨)</span>
            <div style="width: 60px;">{{low.supplierNumber}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">供应量(吨)</span>
            <div style="width: 60px;">{{low.supplierNumber}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">起运地</span>
            <div style="width: 185px;">{{low.loadingPort}}</div>
          </el-form-item>
          <el-form-item>
            <span slot="label">收货地</span>
            <div style="width: 185px;">{{low.placeReceipt}}</div>
          </el-form-item>
          <el-form-item prop="departure">
            <span slot="label" style="color:#FF0000;">车次</span>
            <el-input v-model="from2.departure" oninput="if(value>8000)value=8000" type="Number" placeholder="请输入" clearable style="width: 185px;"></el-input>
          </el-form-item>
          <el-form-item prop="TimeArr" label-width="110px">
            <span slot="label" style="color:#FF0000;">交货时间段</span>
            <el-date-picker v-model="from2.TimeArr" style="width:400px;" type="datetimerange" unlink-panels value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" @change="from2.startDeliveryTime=TimeArr[0]||'',from2.endDeliveryTime=TimeArr[1]||''"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="Dialog2=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="submit3()">确 定</el-button>
      </span>
    </el-dialog>
    <!--交查查询-->
    <el-dialog v-dialogDrag :visible.sync="goodsDialog" width="1090px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">收货查询</span>
      <div>
        <el-form ref="refgoodsParams" :inline="true" label-width="100px" :model="goodsParams">
          <el-form-item>
            <span slot="label">收货站点</span>
            <el-input v-model="goodsParams.receiveStation" placeholder="请输入" style="width:200px" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">物料名称</span>
            <el-input v-model="goodsParams.rawName" placeholder="请输入" style="width:200px" clearable></el-input>
          </el-form-item>
          <el-form-item prop="code" label-width="80px">
            <span slot="label">状态</span>
            <el-select v-model="goodsParams.receiveStatus" placeholder="请选择" style="width:100px">
              <el-option v-for="(item, index) in arr2" :key="index" :label="item.itemName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-button icon="el-icon-search" size="medium" class="bottom_all but1" @click="(goodsParams.page = 1), getGoods()">查 询</el-button>
          <el-button size="medium" class="bottom_all_two" style="margin-left:12px;" @click="initGoods()">重 置</el-button>
        </el-form>
        <div style="padding-top:10px">
          <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="goodsTable" tooltip-effect="dark">
            <el-table-column label="收货站点" align="center" prop="receiveStation"></el-table-column>
            <el-table-column label="库存仓" align="center" prop="repertory"></el-table-column>
            <el-table-column label="状态" align="center">
              <template slot-scope="scope">
                <span style="color:#969799;">{{ arr2 | fromatTable(scope.row.receiveStatus,'itemName','id')}}</span>
              </template>
            </el-table-column>
            <el-table-column label="供应商名称" align="center" prop="supplier"></el-table-column>
            <el-table-column label="物料名称" align="center" prop="rawName"></el-table-column>
            <el-table-column label="物料规格" align="center" prop="specification"></el-table-column>
            <el-table-column label="货票量" align="center" prop="ticketNum"></el-table-column>
            <el-table-column label="一次过磅量" align="center" prop="firstWeight"></el-table-column>
            <el-table-column label="二次过磅量" align="center" prop="secondWeight"></el-table-column>
            <el-table-column label="扣减量" align="center" prop="deductionNum"></el-table-column>
            <el-table-column label="含水率" align="center" prop="moistureContent"></el-table-column>
            <el-table-column label="收货量" align="center" prop="receiveNum"></el-table-column>
            <el-table-column label="交货量照片" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.imgs" class="table_link" @click="show1(scope.row.imgs,'交货量照片')">查看</div>
              </template>
            </el-table-column>
            <el-table-column label="材质书" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.materialBookUrl" class="table_link" @click="show1(scope.row.materialBookUrl,'材质书照片')">查看</div>
              </template>
            </el-table-column>
            <el-table-column label="附件" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.accessoryUrl" class="table_link" @click="show1(scope.row.accessoryUrl,'附件照片')">查看</div>
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" prop="remark"></el-table-column>
            <el-table-column label="交货车辆" align="center" prop="deliveryVehicl"></el-table-column>
            <el-table-column1 label="司机" align="center" prop="driver"></el-table-column1>
            <el-table-column label="实际收货时间" align="center" prop="actualReceiveTime">
            </el-table-column>
            <el-table-column label="一次过磅量时间" align="center" prop="firstTime"></el-table-column>
            <el-table-column label="二次过磅量时间" align="center" prop="secondTime"></el-table-column>
            <el-table-column label="收货地点" align="center" prop="receiveStationSite"></el-table-column>
            <el-table-column fixed="right" label="操作" align="left" width="120">
              <template slot-scope="scope">
                <el-link v-if="scope.row.receiveStatus==5" class="table_link" :underline="false" @click="open1(scope.row,6)">确认交货</el-link>
                <!-- <el-link v-if="scope.row.receiveStatus==1||scope.row.receiveStatus==7" class="table_link" :underline="false" @click="open1(scope.row,7)">拒绝</el-link> -->
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="dialog-pages">
          <div class="dialog_page_totle">总共{{ goodstotal }}条</div>
          <el-pagination :current-page.sync="goodsParams.page" :page-size="goodsParams.pageSize" layout="prev, pager, next, jumper" :total="goodstotal" @current-change="getGoods()"></el-pagination>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="goodsDialog=false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 异常处理 -->
    <!-- <el-dialog v-dialogDrag :visible.sync="goods1Dialog" width="480px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">异常处理</span>
      <div class="dialoginfo">
        <div class="textline">
          <div class="left">异常现象：</div>
          <div class="right">{{goods1Params.phenomena}}</div>
        </div>
        <div class="textline">
          <div>原因：</div>
          <div>{{goods1Params.cause}}</div>
        </div>
        <div class="textline">
          <div>拟处理方式：</div>
          <div>{{goods1Params.processMode}}</div>
        </div>
        <div class="textline">
          <div>条件接收方式：</div>
          <div>{{goods1Params.acceptableConditings}}</div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="submitgoods1(3)">驳 回</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="submitgoods1(2)">接 受</el-button>
    </span>
    </el-dialog> -->
    <!-- 实际交货 -->
    <el-dialog v-dialogDrag :visible.sync="Dialog3" width="480px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">实际交货</span>
      <div class="dialoginfo">
        <el-form ref="reffrom3" :rules="rules6" :inline="true" :model="from3" label-width="110px">
          <el-form-item prop="code">
            <span slot="label">物料名称</span>
            <el-input v-model="low.rawName" disabled placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="ticketNum">
            <span slot="label" style="color:#FF0000;">交货量（吨）</span>
            <el-input v-model="from3.ticketNum" type="Number" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="deliveryVehicl">
            <span slot="label" style="color:#FF0000;">车牌号</span>
            <el-input v-model="from3.deliveryVehicl" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="driver">
            <span slot="label">司机姓名</span>
            <el-input v-model="from3.driver" placeholder="请输入" clearable></el-input>
          </el-form-item>
          <el-form-item prop="driverPhone">
            <span slot="label">司机电话</span>
            <el-input v-model="from3.driverPhone" type="Number" placeholder="请输入" oninput="if(value.length>11)value=value.slice(0,11)" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="Dialog3=false">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px;" @click="submit4()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 高级搜索 -->
    <el-dialog v-dialogDrag :visible.sync="tableParamType" width="650px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">高级搜索</span>
      <div class="dialoginfo">
        <el-form :key="tableParam.loadingPort" ref="reftableParam" :inline="true" :model="tableParam" label-width="110px">
          <el-form-item>
            <span slot="label">编码</span>
            <el-input v-model="tableParam.code" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">接货地</span>
            <el-input v-model="tableParam.loadingPort" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">收货地</span>
            <el-input v-model="tableParam.placeReceipt" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">需求时间</span>
            <el-date-picker v-model="startTimDateEndTimDate" style="width:400px;" type="datetimerange" unlink-panels value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" @change="tableParam.createTime=startTimDateEndTimDate[0]||'',tableParam.updateTime=startTimDateEndTimDate[1]||''"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <span slot="label">状态</span>
            <el-select v-model="tableParam.carStatus" placeholder="请选择" style="width:400px;">
              <el-option label="待确定" value="1"></el-option>
              <el-option label="已接受待提交计划" value="2"></el-option>
              <el-option label="已提交" value="3"></el-option>
              <el-option label="已交货" value="4"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <span slot="label">交货时间</span>
            <el-date-picker v-model="startTimDateEndTimDate2" style="width:400px;" type="datetimerange" unlink-panels value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" @change="tableParam.startTime=startTimDateEndTimDate2[0]||'',tableParam.endTime=startTimDateEndTimDate2[1]||''"></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="tableParamType=false,tableParam.code='',tableParam.code='',tableParam.loadingPort='',tableParam.placeReceipt='',startTimDateEndTimDate=[],tableParam.createTime='',tableParam.updateTime='',startTimDateEndTimDate2=[],tableParam.startTime='',tableParam.endTime='',tableParam.carStatus=''">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="gettableData(),tableParamType=false">搜 索</el-button>
      </span>
    </el-dialog>
    <!-- 查看图片 -->
    <ShowDetails :dialog="imgsDialog" :imgsText="imgsText" :imgList="imgList" :mp4List="mp4List" :fileList="fileList" @reset="reset"></ShowDetails>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import ShowDetails from '@/components/showdetails';
import { Download, QueryPage2 } from "@/api/GHnumber/demand.js";
import {
  queryPage,
  updateStatus,
  queryListsByPid,
  consignment,
  // abnormalAudit,
} from "@/api/supplier/plan.js";
import { AcceptOrRej } from "@/api/GHnumber/goods.js";
import { carReg } from "@/common/RegExp.js";
export default {
  mixins: [mixin],
  components: {
    ShowDetails
  },
  data() {
    var validatePass1 = (rule, value, callback) => {
      if (carReg(value)) {
        callback();
      } else {
        callback(new Error("请输正确的车牌号!"));
      }
    };
    return {
      imgsDialog: false,
      imgsText: '',
      imgList: [],
      mp4List: [],
      fileList: [],
      value1: [],
      startTimDateEndTimDate: [],
      startTimDateEndTimDate2: [],
      tableParamType: false,
      supplierIdType: false,
      supplierId: '',
      /*表格增删改查及下载接口*/
      queryPage: queryPage,
      DownloadURL: Download,
      /*表格数据*/
      table: [],
      /*表单页类型，0为无树状，1为有树状，有树状在el-main加上display:flex*/
      pagesType: 0,
      /*添加表单数据*/
      contractTypelist: [
        { value: "原物料", id: 0 },
        { value: "车辆租赁", id: 1 },
      ],
      currenindex: null,
      tableA: [
        { label: "原物料计划编码", width: "220", prop: "code", status: true },
        { label: "站点名称", width: "120", prop: "station", status: true },
        { label: "原料名称", width: "120", prop: "rawName", status: true },
        { label: "规格", width: "120", prop: "specification", status: true },
        {
          label: "原物料合同编码",
          width: "220",
          prop: "contractNo",
          status: true,
        },
        {
          label: "原物料供应商",
          width: "120",
          prop: "supplierName",
          status: true,
        },
        { label: "是否含运输", width: "120", prop: "", status: true },
        {
          label: "计划供应量（吨）",
          width: "120",
          prop: "supplierNumber",
          status: true,
        },
        {
          label: "累计交货量",
          width: "120",
          prop: "cumulant",
          status: true,
        },
        {
          label: "车辆供应商",
          width: "140",
          prop: "carCompanyName",
          status: true,
        },
        {
          label: "运输车队联系电话",
          width: "220",
          prop: "carCompanyPhone",
          status: true,
        },
        { label: "协作单位", width: "120", prop: "cooperation", status: true },
        { label: "交货计划时间段", width: "260", prop: "", status: true },
        { label: "交货车次", width: "120", prop: "departure", status: true },
        { label: "状态", width: "120", prop: "", status: true },
        { label: "操作", width: "100", prop: "", status: true },
      ],
      tableB: [
        {
          label: "车辆租赁计划编码",
          width: "220",
          prop: "code",
          status: true,
        },
        { label: "站点", width: "120", prop: "station", status: true },
        {
          label: "车辆租赁合同编号",
          width: "220",
          prop: "carContractNo",
          status: true,
        },
        { label: "供应商", width: "120", prop: "carCompanyName", status: true },
        { label: "需求时间", width: "120", prop: "needDate", status: true },
        { label: "接货地", width: "120", prop: "loadingPort", status: true },
        { label: "收货地", width: "120", prop: "placeReceipt", status: true },
        { label: "交货计划时间段", width: "260", prop: "", status: true },
        { label: "交货车次", width: "120", prop: "departure", status: true },
        { label: "状态", width: "120", prop: "", status: true },
        { label: "操作", width: "100", prop: "", status: true },
      ],
      low: {},
      childlow: {},
      /* 收货查询*/
      goodsDialog: false,
      goodsTable: [{}],
      goodsParams: {
        page: 1,
        pageSize: 12,
      },
      arr2: [
        { itemName: "运输中", id: 1 },
        { itemName: "检验中", id: 2 },
        { itemName: "卸料中", id: 3 },
        { itemName: "内部确认中", id: 4 },
        { itemName: "外部确认中", id: 5 },
        { itemName: "已接受", id: 6 },
        { itemName: "退回", id: 7 },
      ],
      goodstotal: 0,
      rules2: {
        code: [{ required: true, message: "请输入站点编码", trigger: "blur" }],
      },
      /*异常处理*/
      goods1Dialog: false,
      goods1Params: {},
      /*交货查询*/
      from4: {},
      rules1: {
        cooperationId: [
          { required: true, message: "请选择协作单位", trigger: "change" },
        ],
        departure: [{ required: true, message: "请输入车次", trigger: "blur" }],
        TimeArr: [
          { required: true, message: "请选择时间", trigger: "change" },
        ],
      },
      Dialog1: false,
      from1: { TimeArr: [] },
      rules4: {
        actualNumber: [
          { required: true, message: "请输入供应量", trigger: "blur" },
        ],
        modifyReason: [
          { required: true, message: "请输入修改原因", trigger: "blur" },
        ],
      },
      arr1: [],
      /*运输计划*/
      Dialog2: false,
      from2: { TimeArr: [] },
      rules5: {
        departure: [{ required: true, message: "请输入车次", trigger: "blur" }],
        TimeArr: [
          { required: true, message: "请选择时间", trigger: "change" },
        ],
      },
      /*实际交货*/
      Dialog3: false,
      from3: {},
      rules6: {
        ticketNum: [
          { required: true, message: "请输入交货量", trigger: "blur" },
        ],
        deliveryVehicl: [
          { required: true, message: "请输入车牌号", trigger: "blur", },
          { validator: validatePass1, trigger: "blur", }
        ],
        driver: [
          { required: true, message: "请输入司机名字", trigger: "blur" },
        ],
        driverPhone: [
          { required: true, message: "请输入司机电话", trigger: "blur" },
        ],
      },
      foreignId: '',//供应商id
      contractId: '',//合同id
    };
  },
  watch: {
    currenindex: {
      handler() {
        switch (this.currenindex) {
          case 0: {
            this.table = this.tableA;
            console.log(this.tableParam);
            this.tableParam = {
              ...this.tableParam,
              station: "",
              rawName: "",
            };
            console.log(1);
            this.gettableData();
            return;
          }
          case 1: {
            this.table = this.tableB;
            this.tableParam = {
              ...this.tableParam,
              transportStatus: 0,
              station: "",
              rawName: "",
            };
            console.log(1);
            this.gettableData();
            return;
          }
        }
      },
      deep: false, //是否深度监听，true为是，默认为false
      immediate: true, //immediate表示在watch中首次绑定的时候，是否执
    },
  },
  /*
   *copy(data)深拷贝数据,返回拷贝完的数据
   *gettableData获取列表数据
   *load下载
   *SortNum保持序列号
   * UpdateOrDelete禁用，启用，删除
   * submitFromDate保存更新数据
   */
  async created() {
    this.tableParam = { ...this.tableParam, code: "", loadingPort: "", placeReceipt: '', createTime: '', updateTime: '', startTime: '', endTime: '', carStatus: '' };
    this.tableParam.status = 1
    this.choose(0)
  },
  methods: {
    /**看图*/
    show1(file, text) {
      let items = file?.split(",").map(res => ('/file/' + res))
      this.imgList = items.filter(res => (res.includes('type=img')))
      this.mp4List = items.filter(res => (res.includes('type=mp4')))
      this.fileList = items.filter(res => (res.includes('type=file')))
      this.imgsText = text
      this.imgsDialog = true
    },
    reset(key) {
      this[key] = false;
    },
    init() {
      /*重置数据*/
      this.tableParam.page = 1
      this.tableParam.station = ''
      this.tableParam.supplierName = ''
      this.tableParam.code = ''
      this.tableParam.loadingPort = ''
      this.tableParam.placeReceipt = ''
      this.startTimDateEndTimDate = ''
      this.tableParam.createTime = ''
      this.tableParam.updateTime = ''
      this.tableParam.carStatus = ''
      this.tableParam.startTimDateEndTimDate2 = ''
      this.tableParam.startTime = ''
      this.tableParam.endTime = ''
      if (this.currenindex == 1) {
        this.tableParam.transportStatus = 0;
      }
      this.gettableData();
    },
    choose(num) {
      this.currenindex = num;
      if (num == 0) {
        this.tableParam.status = 1
      } else {
        this.tableParam.status = 2
      }
    },
    /*打开弹窗*/
    open(low, key) {
      this.low = low;
      this[key] = true;
      if (key == "addDialog") {
        this.from1 = this.$options.data().from1;
        this.from1.TimeArr = []
        setTimeout(() => {
          this.$refs.reffrom1.clearValidate();
        }, 100)
        this.from1.actualNumber = low.supplierNumber;
        queryListsByPid({ supplierId: low.supplierId }).then((res) => {
          this.arr1 = res.data;
        });
      }
      if (key == "Dialog2") {
        this.from2 = this.$options.data().from2;
        this.from2.TimeArr = []
        setTimeout(() => {
          this.$refs.reffrom2.clearValidate();
        }, 100)
      }
      if (key == "Dialog3") {
        this.from3 = this.$options.data().from3;
        setTimeout(() => {
          this.$refs.reffrom3.clearValidate();
        }, 100)
      }
      if (key == "goodsDialog") {
        this.initGoods();
      }
      this.console(low);
    },
    /**确认拒绝收货*/
    open1(low, key) {
      if (key == 6) {
        this.$confirm(`此操作将接受收货?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "bottom_all_two",
          confirmButtonClass: "bottom_all",
          type: "warning",
        })
          .then(() => {
            AcceptOrRej({
              id: low.id,
              receiveStatus: 6,
            }).then(() => {
              this.getGoods();
            });
          })
          .catch(() => { });
      }
      if (key == 7) {
        this.$prompt('', '输入拒绝描述', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          cancelButtonClass: 'bottom_all_two',
          confirmButtonClass: 'bottom_all',
        }).then(({
          value
        }) => {
          AcceptOrRej({
            id: low.id,
            remark: value,
            receiveStatus: 7,
          }).then(() => {
            this.getGoods();
          });

        }).catch(() => { });

      }
      //this.childlow = low;
      // this[key] = true;
      // if (key == "goods1Dialog") {
      //   getConsignmentIssue({ consignmentId: low.id }).then((res) => {
      //     this.goods1Params = res.data;
      //   });
      // }
    },
    /*接受拒绝*/
    status(low, key, status) {
      this.$confirm(`此操作将${status == 0 ? "拒绝" : "接受"}该计划?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "bottom_all_two",
        confirmButtonClass: "bottom_all",
        type: "warning",
      })
        .then(() => {
          updateStatus({ id: low.id, [key]: status, cooperationId: low.cooperationId }).then(() => {
            this.gettableData();
          });
        })
        .catch(() => { });
    },
    /*交货计划*/
    set1() {
      this.$refs.reffrom2.validate((valid) => {
        if (valid) {
          this.from1.actualNumber = this.from2.actualNumber;
          this.from1.modifyReason = this.from2.modifyReason;
          this.Dialog1 = false;
        } else {
          return false;
        }
      });
    },
    submit1() {
      this.$refs.reffrom1.validate((valid) => {
        if (valid) {
          let data = {
            ...this.from1,
            id: this.low.id,
            cooperation: this.$fromatTable(
              this.arr1,
              this.from1.cooperationId,
              "id",
              "name"
            ),
            rawStatus: 3,
          };
          console.log(JSON.parse(JSON.stringify(data)))
          updateStatus(data).then(() => {
            this.addDialog = false;
            this.gettableData();
          });
        } else {
          return false;
        }
      });
    },
    /*运输计划*/
    submit3() {
      this.$refs.reffrom2.validate((valid) => {
        if (valid) {
          let data = {
            ...this.from2,
            id: this.low.id,
            carStatus: 3,
            cooperationId: this.low.cooperationId
          };
          updateStatus(data).then(() => {
            this.Dialog2 = false;
            this.gettableData();
          });
        } else {
          return false;
        }
      });
    },
    submitPlan() { },
    /*收货查询*/
    initGoods() {
      this.goodsParams = this.$options.data().goodsParams;
      this.goodsParams.rawNeedId = this.low.id;
      this.getGoods();
    },
    getGoods() {
      this.goodsParams.rawNeedId = this.low.id;
      QueryPage2(this.goodsParams).then((res) => {
        this.goodsTable = res.data.data;
        this.goodstotal = res.data.totalRows;
      });
    },
    /*异常处理*/
    // submitgoods1(type) {
    //   abnormalAudit({ id: this.goods1Params.id, type: type }).then(() => {
    //     this.goods1Dialog = false;
    //     this.getGoods();
    //   });
    // },
    /*实际交货*/
    submit4() {
      this.$refs.reffrom3.validate((valid) => {
        if (valid) {
          this.from3.rawNeedId = this.low.id;
          consignment(this.from3).then((res) => {
            this.Dialog3 = false;
            this.console(res.data);
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.textline {
  line-height: 40px;
  display: flex;
  > div:first-child {
    width: 100px;
    text-align: right;
  }
  > div:last-child {
    width: 300px;
  }
}
.dialog-pages {
  @include discen_al;
  padding-top: 10px;
}
.dialog-title {
  font-size: 16px;
  font-weight: bold;
  padding-right: 40px;
}
.el-input,
.el-select {
  width: 240px;
}
.table_link {
  margin: 0 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
  cursor: pointer;
}
.tabtop {
  width: 381px;
}
</style>
